import React, { Component } from 'react';
import "../styles/List.scss";

import pic from '../assets/pic.gif'



class List extends Component {
    // 定义组件状态
    constructor(props) {
        super(props)
        this.state = {
            goodslist: [
                { pic, text: 'COSME DECORTE黛珂牛油果乳液150ml', origin: '原价 ￥270', discount: '215' }, { pic, text: 'COSME DECORTE黛珂牛油果乳液150ml', origin: '原价 ￥273', discount: '205' }, { pic, text: 'COSME DECORTE黛珂牛油果乳液150ml', origin: '原价 ￥270', discount: '195' }, { pic, text: 'COSME DECORTE黛珂牛油果乳液150ml', origin: '原价 ￥270', discount: '185' }, { pic, text: 'COSME DECORTE黛珂牛油果乳液150ml', origin: '原价 ￥270', discount: '175' }, { pic, text: 'COSME DECORTE黛珂牛油果乳液150ml', origin: '原价 ￥270', discount: '165' }

            ],
            // //排序类型
            // sortTypes: {
            //     up: {
            //         class: "sort-up",
            //         function: (a, b) => a.discount - b.discount
            //     },
            //     down: {
            //         class: "sort-up",
            //         function: (a, b) => b.discount - a.discount
            //     },
            //     currentSort: "down",
            // },
            // //实现排序
            // onSortChange(){
            //     const { currentSort } = this.state;
            //     let nextSort;
            //     if(currentSort==="down"){
            //         nextSort="up"
            //     }else{
            //         nextSort="down"
            //     }
            //     //更新排列顺序
            //     this.setState({currentSort:nextSort})
            // }
        }
    }
    render() {
        return (
            <div className='list'>
                {
                    this.state.goodslist.map((item, index) => {
                        return (
                            <div className='item' key={index}>
                                <img src={item.pic} alt="" />
                                <div className='text'>{item.text}</div>
                                <span className="origin">{item.origin}</span>
                                <div className="discount">活动价￥<span>{item.discount}</span></div>
                            </div>
                        )
                    })
                }
            </div>
        );
    }
}

export default List;